<template>
    <div>
        <h2>显示会员页面</h2>
        <table>
            <tbody>
                <tr>
                    <td>编号</td>
                    <td>姓名</td>
                    <td>性别</td>
                    <td>手机号</td>
                    <td>地址</td>
                    <td>生日</td>
                </tr>

                <tr v-for="item in data" :key="item.Id">
                    <td>{{item.Id}}</td>
                    <td>{{item.Name}}</td>
                    <td>{{item.Sex?"男":"女"}}</td>
                    <td>{{item.Phone.substring(0,3)+'****'+item.Phone.substring(7)}}</td>
                    <td>{{item.Addr}}</td>
                    <td>{{item.Birth}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive} from 'vue'

let data=ref([
{
    "Id": 1,
    "Name": "Mary",
    "Sex": "0",
    "Phone": "12345678978",
    "Addr": "北京",
    "Birth": "2004-06-15T00:00:00"
  },
  {
    "Id": 2,
    "Name": "Bob",
    "Sex": "1",
    "Phone": "12345678998",
    "Addr": "上海",
    "Birth": "2004-08-15T00:00:00"
  },
  {
    "Id": 3,
    "Name": "Judy",
    "Sex": "0",
    "Phone": "11122233344",
    "Addr": "广西",
    "Birth": "2004-01-15T00:00:00"
  },
  {
    "Id": 4,
    "Name": "Zhangsan",
    "Sex": "1",
    "Phone": "22233344455",
    "Addr": "江苏",
    "Birth": "2004-02-15T00:00:00"
  },
  {
    "Id": 5,
    "Name": "Haha",
    "Sex": "1",
    "Phone": "44455566677",
    "Addr": "山西",
    "Birth": "2004-03-15T00:00:00"
  },
  {
    "Id": 6,
    "Name": "Xiaoxiao",
    "Sex": "0",
    "Phone": "55566677788",
    "Addr": "河北",
    "Birth": "2004-04-15T00:00:00"
  },
  {
    "Id": 7,
    "Name": "Lisi",
    "Sex": "1",
    "Phone": "66677788899",
    "Addr": "广东",
    "Birth": "2004-05-15T00:00:00"
  },
  {
    "Id": 8,
    "Name": "Wangwu",
    "Sex": "1",
    "Phone": "77788899977",
    "Addr": "辽宁",
    "Birth": "2004-07-15T00:00:00"
  },
  {
    "Id": 9,
    "Name": "Jun",
    "Sex": "1",
    "Phone": "88899977744",
    "Addr": "黑龙江",
    "Birth": "2004-09-15T00:00:00"
  },
  {
    "Id": 10,
    "Name": "Shan",
    "Sex": "0",
    "Phone": "11100022211",
    "Addr": "吉林",
    "Birth": "2004-10-15T00:00:00"
  }
])

</script>

<style scoped>

</style>